<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>差看所有员工上班时间</title>

    <!--data table-->
    <link rel="stylesheet" href="js/data-tables/DT_bootstrap.css" />

    <link href="css/style.css" rel="stylesheet">
    <link href="css/style-responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
  <!--  <script src="js/html5shiv.js"></script>-->
    <!--  <script src="js/respond.min.js"></script>-->
    <![endif]-->
</head>


<body class="sticky-header">

<section>
    <div th:replace="commons :: #left"></div>
    <!-- main content start-->
    <div class="main-content" >

        <!-- header section start-->
        <div th:replace="commons :: #search"></div>
        <!-- header section end-->

        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                考勤情况
            </h3>
        </div>
        <!-- page heading end-->
        <div>
            <div style="float: left">
                <select id="month_choose" onchange="option_change(this.options[this.options.selectedIndex].value)">
                    </select>
                    &nbsp; &nbsp;
                    <span>
				<span id="year">2021</span>
				<span id="month">01</span>
			</span>
                    <div id="mytable_div"></div>
            </div>
            <div>
                <div style="float: right;width: 25%;height:50%;">
                    <div> <div style="display: block;float: left"><label>请假</label><div style="width: 50px;height: 50px;background-color: red;" ></div></div>
                        <div style="display: block;float: left"><label>迟到</label><div style="width: 50px;height: 50px;background-color: deepskyblue;" ></div></div>
                        <div style="display: block;float: left"><label>正常上班</label><div style="width: 50px;height: 50px;background-color: greenyellow;" ></div></div>
                    </div>

                    <div class="box" style="float: left;margin-top: 20%;margin-right: 50%">
                        <div class="body-id" style="text-align:center;height:60px;">
                            <button class="btn btn-success" onclick="window.location.href='/clock_in'"  type="button"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">上班</font></font></button>
                            <br>
                            <br>
                            <button class="btn btn-warning" onclick="window.location.href='/clock_out'"  type="button"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">下班</font></font></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--&lt;!&ndash;footer section start&ndash;&gt;-->
        <!--<footer>-->
        <!--2020 &copy; AdminEx by ThemeBucket </a>-->
        <!--</footer>-->
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modernizr.min.js"></script>
<script src="js/jquery.nicescroll.js"></script>

<!--data table-->
<script type="text/javascript" src="js/data-tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/data-tables/DT_bootstrap.js"></script>

<!--common scripts for all pages-->
<script src="js/scripts.js"></script>

<!--script for editable table-->
<script src="js/editable-table.js"></script>


<!-- END JAVASCRIPTS -->
<script th:inline="javascript">
    var date=[[${list}]];
    var week=["星期一","星期二","星期三","星期四","星期五","星期六","星期日"];
    var year = $("#year").text();
    var month=$("#month").text();
    var months=["","一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];

    function span_color(data) {
        if(data==null)return "#2bd574";
        if(data.isLeave==1){
            return "red";
        }else{
            //迟到
            if(data.isLater==1){
                return "deepskyblue";
            }else{
                return "#2bd574";
            }
        }
    }


    //option change事件 parseInt（2021年）->2021
    function option_change(obj) {
        $.ajax({
            url:"/request_for_attenceBymonth",
            data:{month:obj,year:parseInt(year)},
            success:function (data) {
                // obj1对应id为year的span obj2 对应id为month的span，obj3对应要动态加载数据的select
                initTime($("#year"),$("#month"),$("#month_choose"),parseInt(year),parseInt(obj));

                //obj 表示要渲染的位置 date为数据源
                init_table($("#mytable_div"),data,parseInt(year),parseInt(obj));
            },
            error:function () {
                console.log("错误！");
            }
        })
    }

    //初始化span的值 当前年、当前月
    // obj1对应id为year的span obj2 对应id为month的span，obj3对应要动态加载数据的select year为那一年 month为那一月

    function initTime(obj1,obj2,obj3,year,month) {
        obj1.text(year+"年");
        obj2.text(month+"月");
        var select="<select>";
        for (var i = 1; i <months.length; i++) {
            if(month==i){
                select+="<option value='"+i+"' selected>"+months[i]+"</option>";
            }else select+="<option value='"+i+"'>"+months[i]+"</option>";
        }
        select+="</select>";
        obj3.html(select);
    }




    //动态生成table表格html
    //obj 表示要渲染的位置 date为数据源
    function init_table(obj,data,year,month) {
        //当月缩进
        var number = intent(daySum(year,month));
        //当前月有多少天
        var month_day=dayMax(year,month);
        //用来记录天数
        var day=1;

        var table="<table style='14px;text-align: center'>" +
            "<tr>";
        //表头添加
        for (var i = 0; i <week.length; i++) {
            table+="<th>"+
                "<div style='width:100px'>"+
                "<span>"+week[i]+"</span>"+
                "</div>"+
                "</th>";
        }
        table+="</tr>";
        for (var i = 0; i < 5; i++) {
            table+="<tr>";
            for (var j = 0; j <7 ; j++) {
                if(i==0&&j<number-1){
                    table +=" <td>\n" +
                        "    <div style=\"width:99px;height:99px;border:1px;background: #74f399\">\n" +
                        "    <span style=\"height:99px\"></span>\n" +
                        "    </div>\n" +
                        "    </td>";
                }else if(day>month_day)
                {break;}else {
                    table+=" <td>\n" +
                        "    <div style=\"width:99px;height:99px;border:1px;background:"+span_color(data[day])+"\">\n" +
                        "    <span style=\"height:99px\">"+day+"</span>\n" +
                        "    <div style='text-align: center;color: white'>"+mark(data[day])+"</div>\n"+
                        "    </div>\n" +
                        "    </td>";
                    day++;
                }
            }
            table+="</tr>";
        }
        table+="</table>";
        obj.html(table);
    }

    //获取后端数据mark
    function mark(obj) {
        if(obj==null)return "";
        var msg="";
        if(obj==null)return "";
        else if(obj.isLeave==1){
            msg+= "请假、";
        }else if(obj.isLater==1){
            msg+="迟到、"
        }else msg+="正常、";
        msg= msg.substring(0,msg.lastIndexOf("、"));
        return msg;
    }

    function daySum(year,month) {
        var day_sum=0;
        for (var i = 1900; i < parseInt(year); i++) {
            if(i%400==0||(i%4==0&& i%100!=0)){
                day_sum+=366;
            }else{
                day_sum+=365;
            }
        }
        //月份天数
        for (var i = 1; i <parseInt(month); i++) {
            switch (i) {
                case 1:
                case 3:
                case 5:
                case 7:
                case 8:
                case 10:
                case 12:
                    day_sum+=31;
                    break;
                case 2:
                    if (year % 400 == 0 || (year % 4 == 0 && (year % 100 != 0))) {
                        // 闰年2月29
                        day_sum += 29;
                    } else {
                        // 平年2月28
                        day_sum += 28;
                    }
                    break;
                default:
                    day_sum+=30;
                    break;
            }
        }
        return day_sum;
    }
    //当月1号的星期
    function intent(day_sum) {
        var intent=0;
        intent= 1+parseInt(day_sum)%7;
        if(intent==7)intent=0;
        return intent;
    }
    //这个 月有多少天
    function dayMax(year,month) {
        var day_max=0;
        switch (parseInt(month)) {
            case 1:
            case 3:
            case 5:
            case 7:
            case 8:
            case 10:
            case 12:
                day_max = 31;
                break;
            case 2:
                // 判断是否是闰年
                if (parseInt(year) % 400 == 0 || (parseInt(year) % 4 == 0 && (parseInt(year) % 100 != 0))) {
                    // 闰年2月29
                    day_max = 29;
                } else {
                    // 平年2月28
                    day_max = 28;
                }
                break;
            default:
                day_max = 30;
                break;
        }
        return day_max;

    }
    //这个月的一号星期
    //Date() 月份范围【0-11】
    $(document).ready(function(){
        var init_time=new Date();
        var init_month=parseInt(init_time.getMonth());
        var init_year=parseInt(init_time.getFullYear());
        initTime($("#year"),$("#month"),$("#month_choose"),init_year,init_month+1);
        init_table($("#mytable_div"),date,year,init_month+1);
    });
</script>

</body>
</html>